import 'package:flutter/material.dart';
import 'package:flutter_axrjc/style.dart';
import 'package:get/get.dart';
import 'package:webview_flutter/webview_flutter.dart';

import 'logic.dart';

class ReportMonthDetailPage extends StatelessWidget {
  const ReportMonthDetailPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<ReportMonthDetailLogic>();
    final state = Get.find<ReportMonthDetailLogic>().state;
    return Scaffold(
      backgroundColor: const Color(0xffEFEFEF),
      appBar: AppBar(
        leading:
            InkWell(onTap: Get.back, child: const Icon(Icons.arrow_back_ios)),
        title: const Text("查看报告"),
        centerTitle: true,
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.all(20),
            child: Row(
              children: [
                Expanded(
                    child: Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10)),
                  child: Column(
                    children: [
                      const Padding(
                        padding: EdgeInsets.symmetric(vertical: 10),
                        child: Text(
                          "近期检测照度",
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(bottom: 10),
                        child: Obx(() {
                          return Text(
                            state.topData.value == null
                                ? '加载中'
                                : '${state.topData.value?.recentDetect}',
                            style: const TextStyle(
                                color: primaryColor, fontSize: 24),
                          );
                        }),
                      )
                    ],
                  ),
                )),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                    child: Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10)),
                  child: Column(
                    children: [
                      const Padding(
                        padding: EdgeInsets.symmetric(vertical: 10),
                        child: Text(
                          "照度下降幅度",
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(bottom: 10),
                        child: Obx(() {
                          return Text(
                            state.topData.value == null
                                ? '加载中'
                                : '${state.topData.value?.percentDecrease}',
                            style: const TextStyle(
                                color: orangeColor, fontSize: 24),
                          );
                        }),
                      )
                    ],
                  ),
                )),
              ],
            ),
          ),
          Container(
            decoration: const BoxDecoration(color: Colors.white),
            // constraints: const BoxConstraints(
            //   maxHeight: 250.0,
            //   maxWidth: 600.0,
            // ),
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text(
                        "照度走势",
                        style: TextStyle(fontSize: 16),
                      ),
                      Text(
                        "${logic.bean.fixtureName} ${logic.bean.fixtureBrand}-${logic.bean.fixtureModel}",
                        style: const TextStyle(color: Colors.grey),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: List.generate(state.queryTimeTypeList.length,
                          (index) {
                        var bean = state.queryTimeTypeList[index];
                        return Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 4),
                          child: GestureDetector(
                            onTap: () {
                              state.queryTimeType.value = bean.queryTimeType;
                              logic.getECahr();
                            },
                            child: Obx(() {
                              return Container(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 8, vertical: 5),
                                  decoration: BoxDecoration(
                                      color: state.queryTimeType.value ==
                                              bean.queryTimeType
                                          ? orangeColor
                                          : const Color(0xffF8DFC7),
                                      borderRadius: BorderRadius.circular(15)),
                                  child: Obx(() {
                                    return Text(
                                      bean.title,
                                      style: TextStyle(
                                          fontSize: 9,
                                          color: state.queryTimeType.value ==
                                                  bean.queryTimeType
                                              ? Colors.white
                                              : Colors.black),
                                    );
                                  }));
                            }),
                          ),
                        );
                      }),
                    ),
                  ),
                ),
                SizedBox(
                  width: Get.width,
                  height: 250,
                  child: WebViewWidget(
                    controller: logic.webViewController,
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
